<ion-header>
  <ion-toolbar class="scanner">
    <ion-buttons slot="start">
      <ion-button (click)="closeModal()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>扫描中</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [class.scanner]="scannerClass">

  <div class="qr-scanner-area">
    <p class="lines"></p>
  </div>

  <ion-grid fixed class="scanner-button-bottom">
    <ion-row>
      <ion-col size="6" class="ion-flex ion-justify-content-center">
        <ion-button fill="clear" class="qr-scanner-button" (click)="toogleLight()">
          <ion-icon slot="icon-only" [name]="lightIcon"></ion-icon>
        </ion-button>
      </ion-col>
      <!-- <ion-col size="6" class="ion-flex ion-justify-content-center">
        <ion-button fill="clear" class="qr-scanner-button" (click)="toggleCamera()">
          <ion-icon name="reverse-camera" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-col> -->
    </ion-row>
  </ion-grid>
</ion-content>